<template>
	<view class="video-container">
		<!-- 视频播放器区域 -->
		<view class="video-section">
			<!--    <view class="video-header">
        <view class="back-btn" @click="goBack">
          <text class="back-icon">‹</text>
          <text class="back-text">返回</text>
        </view>
        <text class="video-title">课程视频播放</text>
        <view class="header-placeholder"></view>
      </view> -->

			<!-- 视频播放器 -->
			<view class="video-player">
				<!-- 实际项目中这里使用uni-app的video组件 -->
				<view class="video-placeholder">
					<!--    <text class="play-icon">▶</text>
          <text class="video-hint">视频播放区域</text> -->
					<video id="myVideo" style="width: 100%;"
						src="https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4"
						showStatusBar :danmu-list="danmuList" enable-danmu danmu-btn :controls="true">
					</video>
				</view>

				<!-- 播放控制 -->
				<!-- 	<view class="video-controls">
					<view class="control-group">
						<view class="control-btn" @click="togglePlay">
							<text class="control-icon">{{ isPlaying ? '❚❚' : '▶' }}</text>
							<text class="control-text">{{ isPlaying ? '暂停' : '播放' }}</text>
						</view>

						<view class="progress-section">
							<text class="time-display">{{ formatTime(currentTime) }}</text>
							<view class="progress-bar" @click="seekTo">
								<view class="progress-fill" :style="{ width: progress + '%' }"></view>
								<view class="progress-thumb" :style="{ left: progress + '%' }"></view>
							</view>
							<text class="time-display">{{ formatTime(duration) }}</text>
						</view>

						<view class="control-btn" @click="toggleFullscreen">
							<text class="control-icon">⛶</text>
							<text class="control-text">全屏</text>
						</view>
					</view>
				</view> -->
			</view>
		</view>

		<!-- 课程信息区域 -->
		<view class="course-info">
			<view class="info-header">
				<text class="course-name">{{ courseInfo.name }}</text>
				<view class="course-meta">
					<text class="meta-item">共{{ courseInfo.totalLessons }}节</text>
					<text class="meta-divider">|</text>
					<text class="meta-item">已学{{ courseInfo.completedLessons }}节</text>
				</view>
			</view>

			<view class="teacher-info">
				<view class="teacher-avatar">
					<text class="avatar-text">师</text>
				</view>
				<view class="teacher-details">
					<text class="teacher-name">{{ courseInfo.teacher }}</text>
					<text class="teacher-title">{{ courseInfo.teacherTitle }}</text>
				</view>
			</view>

			<view class="course-description">
				<text class="description-title">课程简介</text>
				<text class="description-content">{{ courseInfo.description }}</text>
			</view>
		</view>

		<!-- 章节列表 -->
		<view class="chapter-section">
			<view class="section-header">
				<text class="section-title">课程章节</text>
				<text class="section-subtitle">共{{ courseInfo.chapters.length }}章</text>
			</view>

			<view class="chapter-list">
				<view v-for="(chapter, index) in courseInfo.chapters" :key="chapter.id" class="chapter-item"
					:class="{ active: currentChapter === chapter.id }" @click="switchChapter(chapter.id)">
					<view class="chapter-order">
						<text class="order-number">{{ index + 1 }}</text>
					</view>
					<view class="chapter-content">
						<text class="chapter-name">{{ chapter.name }}</text>
						<text class="chapter-duration">{{ chapter.duration }}</text>
					</view>
					<view class="chapter-status">
						<text v-if="chapter.completed" class="status-completed">已学完</text>
						<text v-else class="status-pending">待学习</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 相关资源 -->
		<!-- <view class="resources-section">
      <view class="section-header">
        <text class="section-title">课程资料</text>
      </view>
      
      <view class="resource-list">
        <view class="resource-item" v-for="resource in courseInfo.resources" :key="resource.id">
          <view class="resource-icon">
            <text class="icon-text">{{ resource.type === 'pdf' ? '📄' : '📝' }}</text>
          </view>
          <view class="resource-info">
            <text class="resource-name">{{ resource.name }}</text>
            <text class="resource-size">{{ resource.size }}</text>
          </view>
          <view class="resource-action">
            <text class="download-btn" @click="downloadResource(resource)">下载</text>
          </view>
        </view>
      </view>
    </view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				danmuList: [{
						text: '第 1s 出现的弹幕',
						color: '#ff0000',
						time: 1
					},
					{
						text: '第 3s 出现的弹幕',
						color: '#ff00ff',
						time: 3
					}
				],
				videoIndex: 0,
				videoUrl: [
					"http://vjs.zencdn.net/v/oceans.mp4",
					"https://sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4",
					"http://www.w3school.com.cn/example/html5/mov_bbb.mp4", "https://www.w3schools.com/html/movie.mp4",
					"https://media.w3.org/2010/05/sintel/trailer.mp4",
					"https://stream7.iqilu.com/10339/upload_transcode/202002/09/20200209105011F0zPoYzHry.mp4",
					"https://stream7.iqilu.com/10339/upload_transcode/202002/09/20200209104902N3v5Vpxuvb.mp4",
				],
				isPlaying: false,
				currentTime: 0,
				duration: 3600, // 1小时
				progress: 0,
				currentChapter: 1,

				courseInfo: {
					name: '零售业务全流程管理',
					totalLessons: 10,
					completedLessons: 3,
					teacher: '张老师',
					teacherTitle: '高级业务专家',
					description: '本课程全面讲解零售业务的全流程管理，包括客户开发、业务办理、风险控制等环节。通过实际案例分析和实操演练，帮助学员掌握零售业务的核心技能。',

					chapters: [{
							id: 0,
							name: '零售业务概述',
							duration: '15:30',
							completed: true
						},
						{
							id: 1,
							name: '客户开发技巧',
							duration: '22:15',
							completed: true
						},
						{
							id: 2,
							name: '业务流程管理',
							duration: '18:45',
							completed: true
						},
						{
							id: 3,
							name: '风险控制要点',
							duration: '25:20',
							completed: false
						},
						{
							id: 4,
							name: '案例分析与实操',
							duration: '30:10',
							completed: false
						},
						{
							id: 5,
							name: '案例分析与实操',
							duration: '30:10',
							completed: false
						}
					],

					resources: [{
							id: 1,
							name: '零售业务手册.pdf',
							type: 'pdf',
							size: '2.5MB'
						},
						{
							id: 2,
							name: '课程讲义.docx',
							type: 'doc',
							size: '1.8MB'
						},
						{
							id: 3,
							name: '实操案例集.zip',
							type: 'zip',
							size: '5.2MB'
						}
					]
				}
			}
		},

		computed: {
			// progress() {
			// 	return (this.currentTime / this.duration) * 100;
			// }
		},

		onLoad(options) {
			// 从上一页传递课程ID
			if (options.courseId) {
				this.loadCourseData(options.courseId);
			}

			// 模拟视频加载
			this.simulateVideoLoad();
		},

		methods: {
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},

			// 加载课程数据
			loadCourseData(courseId) {
				// 实际项目中这里调用API获取课程数据
				console.log('加载课程数据:', courseId);
			},

			// 模拟视频加载
			simulateVideoLoad() {
				setTimeout(() => {
					this.isPlaying = true;
					this.startProgressTimer();
				}, 1000);
			},

			// 开始进度计时器
			startProgressTimer() {
				if (this.progressTimer) {
					clearInterval(this.progressTimer);
				}

				this.progressTimer = setInterval(() => {
					if (this.isPlaying && this.currentTime < this.duration) {
						this.currentTime += 1;
					}
				}, 1000);
			},

			// 切换播放状态
			togglePlay() {
				this.isPlaying = !this.isPlaying;

				if (this.isPlaying) {
					this.startProgressTimer();
				} else {
					clearInterval(this.progressTimer);
				}
			},

			// 切换全屏
			toggleFullscreen() {
				uni.showToast({
					title: this.isFullscreen ? '退出全屏' : '进入全屏',
					icon: 'none'
				});
				// 实际项目中这里调用全屏API
			},

			// 跳转到指定时间点
			seekTo(e) {
				// 实际项目中根据点击位置计算时间
				const progress = e.detail ? e.detail.value : 50; // 简化处理
				this.currentTime = (progress / 100) * this.duration;
			},

			// 切换章节
			switchChapter(chapterId) {
				this.currentChapter = chapterId;
				this.videoIndex = chapterId;
				this.currentTime = 0;
				uni.showToast({
					title: `切换到第${chapterId+1}章`,
					icon: 'success'
				});
			},

			// 下载资源
			downloadResource(resource) {
				uni.showLoading({
					title: '下载中...'
				});

				// 模拟下载过程
				setTimeout(() => {
					uni.hideLoading();
					uni.showToast({
						title: `已开始下载: ${resource.name}`,
						icon: 'success'
					});
				}, 1500);
			},

			// 格式化时间显示
			formatTime(seconds) {
				const mins = Math.floor(seconds / 60);
				const secs = Math.floor(seconds % 60);
				return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
			}
		},

		onUnload() {
			// 清理定时器
			if (this.progressTimer) {
				clearInterval(this.progressTimer);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.video-container {
		background: #f5f7fa;
		min-height: 100vh;
	}

	.video-section {
		background: white;
		margin-bottom: 20rpx;
	}

	.video-header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 30rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.back-btn {
		display: flex;
		align-items: center;
		color: #1890ff;
		font-size: 28rpx;
	}

	.back-icon {
		font-size: 36rpx;
		margin-right: 10rpx;
	}

	.video-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.header-placeholder {
		width: 120rpx;
	}

	.video-player {
		position: relative;
		background: #000;
		height: 400rpx;
	}

	.video-placeholder {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		color: white;
	}

	.play-icon {
		font-size: 80rpx;
		margin-bottom: 20rpx;
	}

	.video-hint {
		font-size: 28rpx;
		opacity: 0.8;
	}

	.video-controls {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(0, 0, 0, 0.7);
		padding: 20rpx;
	}

	.control-group {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.control-btn {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: white;
	}

	.control-icon {
		font-size: 36rpx;
		margin-bottom: 10rpx;
	}

	.control-text {
		font-size: 20rpx;
	}

	.progress-section {
		flex: 1;
		display: flex;
		align-items: center;
		margin: 0 30rpx;
	}

	.time-display {
		color: white;
		font-size: 24rpx;
		min-width: 80rpx;
	}

	.progress-bar {
		flex: 1;
		height: 6rpx;
		background: rgba(255, 255, 255, 0.3);
		border-radius: 3rpx;
		margin: 0 20rpx;
		position: relative;
	}

	.progress-fill {
		height: 100%;
		background: #1890ff;
		border-radius: 3rpx;
		transition: width 0.3s;
	}

	.progress-thumb {
		position: absolute;
		top: 50%;
		width: 20rpx;
		height: 20rpx;
		background: #1890ff;
		border-radius: 50%;
		transform: translate(-50%, -50%);
		transition: left 0.3s;
	}

	.course-info {
		background: white;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.info-header {
		margin-bottom: 30rpx;
	}

	.course-name {
		font-size: 36rpx;
		font-weight: 600;
		color: #333;
		display: block;
		margin-bottom: 15rpx;
	}

	.course-meta {
		display: flex;
		align-items: center;
	}

	.meta-item {
		font-size: 24rpx;
		color: #666;
	}

	.meta-divider {
		margin: 0 15rpx;
		color: #ccc;
	}

	.teacher-info {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		padding: 20rpx;
		background: #f8f9fa;
		border-radius: 12rpx;
	}

	.teacher-avatar {
		width: 80rpx;
		height: 80rpx;
		background: #1890ff;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.avatar-text {
		color: white;
		font-size: 32rpx;
	}

	.teacher-details {
		flex: 1;
	}

	.teacher-name {
		font-size: 28rpx;
		font-weight: 500;
		color: #333;
		display: block;
		margin-bottom: 5rpx;
	}

	.teacher-title {
		font-size: 24rpx;
		color: #666;
		display: block;
	}

	.course-description {
		border-top: 1rpx solid #f0f0f0;
		padding-top: 30rpx;
	}

	.description-title {
		font-size: 28rpx;
		font-weight: 600;
		color: #333;
		display: block;
		margin-bottom: 15rpx;
	}

	.description-content {
		font-size: 26rpx;
		color: #666;
		line-height: 1.6;
		display: block;
	}

	.chapter-section,
	.resources-section {
		background: white;
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: 600;
		color: #333;
	}

	.section-subtitle {
		font-size: 24rpx;
		color: #666;
	}

	.chapter-item {
		display: flex;
		align-items: center;
		padding: 25rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.chapter-item:last-child {
		border-bottom: none;
	}

	.chapter-item.active {
		background: #f0f8ff;
		margin: 0 -30rpx;
		padding: 25rpx 30rpx;
	}

	.chapter-order {
		width: 60rpx;
		height: 60rpx;
		background: #f0f0f0;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.chapter-item.active .chapter-order {
		background: #1890ff;
		color: white;
	}

	.order-number {
		font-size: 24rpx;
		font-weight: 500;
	}

	.chapter-content {
		flex: 1;
	}

	.chapter-name {
		font-size: 28rpx;
		color: #333;
		display: block;
		margin-bottom: 8rpx;
	}

	.chapter-duration {
		font-size: 24rpx;
		color: #999;
		display: block;
	}

	.chapter-status {
		margin-left: 20rpx;
	}

	.status-completed {
		background: #f6ffed;
		color: #52c41a;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
		border: 1rpx solid #b7eb8f;
	}

	.status-pending {
		background: #fff7e6;
		color: #fa8c16;
		padding: 8rpx 16rpx;
		border-radius: 20rpx;
		font-size: 22rpx;
		border: 1rpx solid #ffd591;
	}

	.resource-item {
		display: flex;
		align-items: center;
		padding: 25rpx 0;
		border-bottom: 1rpx solid #f5f5f5;
	}

	.resource-item:last-child {
		border-bottom: none;
	}

	.resource-icon {
		width: 80rpx;
		height: 80rpx;
		background: #f0f0f0;
		border-radius: 12rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.icon-text {
		font-size: 36rpx;
	}

	.resource-info {
		flex: 1;
	}

	.resource-name {
		font-size: 28rpx;
		color: #333;
		display: block;
		margin-bottom: 8rpx;
	}

	.resource-size {
		font-size: 24rpx;
		color: #999;
		display: block;
	}

	.resource-action {
		margin-left: 20rpx;
	}

	.download-btn {
		background: #1890ff;
		color: white;
		padding: 12rpx 24rpx;
		border-radius: 6rpx;
		font-size: 24rpx;
	}

	// /* 响应式设计 */
	// @media (max-width: 750px) {
	//   .video-player {
	//     height: 300rpx;
	//   }

	//   .control-group {
	//     flex-wrap: wrap;
	//   }

	//   .progress-section {
	//     order: -1;
	//     width: 100%;
	//     margin-bottom: 20rpx;
	//   }
	// }
</style>